<h1 class="page-header">API</h1>

<div>
	<form style="margin-bottom: 3px;" class="form-inline">
		<button type="button" class="btn btn-success btn-sm" ng-click="create()">
            Create
        </button>

		<label for="search">Search:</label>
		<input type="text" class="form-control" ng-model="q" id="search" />
	</form>
</div>

<div class="table-responsive">
	<table class="table table-bordered table-striped">
		<thead>
			<tr>
				<th width="5%">Name</th>
				<th width="10%">Url</th>
				<th width="5%">Method</th>
				<th width="5%">Status</th>
				<th width="15%">Desc</th>
				<th width="15%">Dispatch Nodes</th>
				<th width="10%">Access Control</th>
				<th width="10%">Mock</th>
				<th width="30%">Opts</th>
			</tr>
		</thead>

		<tbody>
			<tr ng-repeat="api in apis | filter: q">
				<td>
					<a href="#/apis/{{api.encodeURL}}/{{api.method}}">{{api.name}}</a>
				</td>
				<td>
					<span>{{api.url}}</span>
				</td>
				<td>
					{{api.method}}
				</td>
				<td>
					{{api.status | status}}
				</td>
				<td>
					{{api.desc}}
				</td>
				<td>
					<table class="table table-bordered ">
						<thead>
							<tr>
								<th>Cluster</th>
								<th>AttrName</th>
								<th>Rewrite</th>
								<th>Validation</th>
							</tr>
						</thead>
						<tbody>
							<tr ng-repeat="n in api.nodes">
								<td><a href="#/clusters/{{n.clusterName}}">{{n.clusterName}}</a></td>
								<td>{{n.attrName}}</td>
								<td>{{n.rewrite}}</td>
								<td>{{n.validations | json}}</td>
							</tr>
						</tbody>
					</table>
				</td>
				<td>
					{{api.accessControl | json}}
				</td>
				<td>
					{{api.mock | json}}
				</td>
				<td>
					<button type="button" class="btn btn-success btn-sm" ng-click="up(api)">UP</button>
					<button type="button" class="btn btn-success btn-sm" ng-click="down(api)">DOWN</button>
					<button type="button" class="btn btn-success btn-sm" ng-click="delete(api.encodeURL, api.method)">Delete</button>
				</td>
			</tr>
		</tbody>
	</table>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">Servers</h4>
			</div>
			<div class="modal-body">
				<div class="table-responsive">
					<table class="table table-bordered table-striped">
						<thead>
							<tr>
								<th></th>
								<th>Name</th>
								<th>Pattern</th>
								<th>Load Balance</th>
								<th>ServerCounts</th>
							</tr>
						</thead>

						<tbody>
							<tr ng-repeat="cluster in clusters | filter: q">
								<td>
									<input type="checkbox" ng-model="cluster.checked" />
								</td>
								<td>{{cluster.name}}</td>
								<td>{{cluster.pattern}}</td>
								<td>{{cluster.lbName}}</td>
								<td>{{cluster.count}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" ng-click="bind()">Bind</button>
			</div>
		</div>
	</div>
</div>